<template>
  <div class='box'>
    <div class='left-box'>
      <img :src='iconUrl' alt=''/>
      <div class='title-name'>{{title}}</div>
    </div>
    <slot name='right'></slot>
  </div>
</template>

<script>
export default {
  name: 'headTitle',
  props:{
    iconUrl:{
      type:String,
      default:''
    },
    title:{
      type:String,
      default:'业务资源数据'
    }
  },
  data(){
    return{

    }
  }
}
</script>

<style lang='less' scoped>
  .box{
    padding: 0 18px;
    width: 100%;
    height: 52px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid #E7E9EC;
    .left-box{
      display: flex;
      align-items: center;
      img{
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
      .title-name{
        font-size: 18px;
        font-weight: 500;
        color: #1B2C49;
      }
    }
  }
</style>